import { useState, useEffect, useRef } from "react";
import CuploadImage, { CuploadImageMethods } from "@/components/CuploadImage";
import { connect } from "react-redux";
import type { userGetuserInfoReturnModel } from "@/api/modules/user";
import { userModify } from "@/api/modules/user";
import { Col, message, Rate, Row } from "antd";
import { getUserInfo } from "@/utils/getUserInfo";
import { setUserInfo } from "@/redux/modules/global/action";
import { toNumber } from "lodash";
import dayjs from "dayjs";
import "../index.less";
const AvatarCard = (props: any) => {
	const { userInfo, setUserInfo }: { userInfo: userGetuserInfoReturnModel; setUserInfo: Function } = props;
	async function onChangeFormIds(ids: string[]) {
		if (!ids.length) return;
		const { code, msg } = await userModify({ avatar: ids.toString() });
		if (code === 0) {
			message?.success(msg);
			refreshUserInfo();
		}
	}
	// 转换店铺评分
	function rateNum(rate_count: string): number {
		const rate = toNumber(rate_count.replace("%", ""));
		return toNumber((rate / 20).toFixed(2)); // 20% === 评分组件的1
	}
	// 刷新获取用户信息接口
	function refreshUserInfo() {
		getUserInfo().then(res => {
			setUserInfo(res);
		});
	}
	return (
		<>
			<div className="avatar-card f-col-c-c">
				<CuploadImage
					width={200}
					height={200}
					max={1}
					defaultFileList={userInfo.avatar}
					onChangeIds={ids => onChangeFormIds(ids)}
				/>
				<div className="mt-20 text-18 font-bold">{userInfo.userName || "未命名店铺"}</div>
				<div className="mt-20 text-14 color-secondary">{userInfo.descText || "未填写简介"}</div>
			</div>
			<div className="h-30" />
			<Row className="mb-10">
				<Col offset={3} span={7} className="font-bold">
					店铺评分：
				</Col>
				<Col span={14}>
					<Rate disabled defaultValue={rateNum(userInfo.rate_count)} />
				</Col>
			</Row>
			<Row className="mb-10">
				<Col offset={3} span={7} className="font-bold">
					联系手机号：
				</Col>
				<Col span={14} className="color-secondary">
					{userInfo.phone}
				</Col>
			</Row>
			<Row className="mb-10">
				<Col offset={3} span={7} className="font-bold">
					店铺地址：
				</Col>
				<Col span={14} className="color-secondary">
					{userInfo.province && userInfo.city && userInfo.county ? (
						<>{userInfo.province + userInfo.city + userInfo.county + userInfo.addressDetail}</>
					) : (
						<>未填写地址</>
					)}
				</Col>
			</Row>
			<Row className="mb-10">
				<Col offset={3} span={7} className="font-bold">
					注册时间：
				</Col>
				<Col span={14} className="color-secondary">
					{dayjs(userInfo.createTime).format("YYYY-MM-DD HH:mm:ss")}
				</Col>
			</Row>
			<Row className="mb-10">
				<Col offset={3} span={7} className="font-bold">
					最后登陆时间：
				</Col>
				<Col span={14} className="color-secondary">
					{dayjs(userInfo.lastLoginTime).format("YYYY-MM-DD HH:mm:ss")}
				</Col>
			</Row>
		</>
	);
};
const mapState = (state: any) => ({
	userInfo: state.global.userInfo
});
const mapDispatchToProps = { setUserInfo };
export default connect(mapState, mapDispatchToProps)(AvatarCard);
